/*
* 模块描述：常用文本处理类
* 模块兼容：Chrome（latest-1）、Firefox（latest-1）、Explorer（6+）
* 模块作者：@iyoole
* 更新时间：2017-01-23
*/

// 以“单词”作为换行依据
.text-break-word() {
    white-space: pre-wrap;
    word-wrap: break-word;
}

// 以“字符”【“字母”、“数字”、“字”】作为换行依据
.text-break-letter() {
    white-space: pre-wrap;
    word-break: break-all;
}

// 取代（适用于背景图取代文本的场景）
.text-replace() {
    overflow: hidden;
    text-indent: 999em * -1;
    letter-spacing: 999em * -1;
}

// 单行文本溢出隐藏
.text-overflow-nowrap() {
    overflow: hidden;
    white-space: nowrap;
}

// 单行文本以省略号形式（...）溢出隐藏
.text-overflow-nowrap-ellipsis() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 多行文本溢出隐藏（Webkit内核浏览器）
.text-overflow-ellipsis(@count) {
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @count;

    text-overflow: ellipsis;
}

.text {
    // 变换
    &-lowercase {
        text-transform: lowercase;  // CSS 1.0，小写字母
    }

    &-uppercase {
        text-transform: uppercase;  // CSS 1.0，大写字母
    }

    &-capitalize {
        text-transform: capitalize; // CSS 1.0，首字母大写
    }

    // 不换行
    &-nowrap {
        white-space: nowrap;
    }

    // 换行（打断）
    &-break {

        // 以“单词”作为换行依据
        &-word {
            .text-break-word();
        }

        // 以“字符”【“字母”、“数字”、“字”】作为换行依据
        &-letter {
            .text-break-letter();
        }

    }

    // 取代（适用于背景图取代文本的场景）
    &-replace {
        .text-replace();
    }

    // 溢出隐藏（作用元素必须是 block 或 inline-block 级）
    &-overflow {

        // 单行文本溢出隐藏
        &-nowrap {
            .text-overflow-nowrap();

            // 单行文本以省略号形式（...）溢出隐藏
            &-ellipsis {
                .text-overflow-nowrap-ellipsis();
            }
        }

        // 多行文本溢出隐藏（Webkit内核浏览器）
        &-ellipsis {}

    }

}

// CSS属性说明
// -----------------------------------
// white-space: pre-wrap; // CSS 1.0，强制换行，只对中文起作用
// white-space: nowrap; // CSS 1.0，强制不换行，中英文都起作用
// word-wrap: break-word;  // CSS 3.0，以单词作为换行依据，只对英文起作用
// word-break: break-all; // CSS 3.0，以字母作为换行依据，只对英文起作用

// 使用示例
// -----------------------------------
// class="text-lowercase"

// class="text-nowrap"
// class="text-break-word"
// .example { .text-break-letter(); }

// class="text-replace"

// class="text-overflow-nowrap"
// class="text-overflow-nowrap-ellipsis"
// .example { .text-overflow-ellipsis(3); }

// 参考文献
// -----------------------------------
// http://v3.bootcss.com/css/#type-alignment
// http://v3.bootcss.com/css/#type-transformation

// http://caniuse.com/#feat=word-break
// http://zmingcx.com/css-compulsory-english-chinese-and-non-wrapping-line.html
// http://www.hicss.net/solve-change-line-in-css/

// http://www.smashingmagazine.com/2012/04/11/css-sprites-revisited/

// http://v3.bootcss.com/css/#less-mixins-truncating

// http://www.css88.com/archives/5206
// http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html
